<template>
  <div class="add-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <el-alert title="添加商品信息" type="info" center show-icon></el-alert>
      <!-- 步骤条 -->
      <el-steps :active="Number(activeName)" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- 右侧table栏 -->
      <el-tabs
        :tab-position="tabPosition"
        v-model="activeName"
        :before-leave="tabEvent"
        style="height: 100%"
      >
        <el-tab-pane label="基本信息" name="0">
          <el-form
            ref="formLabelAlignForm"
            :label-position="labelPosition"
            label-width="80px"
            :model="formLabelAlign"
            :rules="rules"
          >
            <el-form-item prop="goods_name" label="商品名称">
              <el-input v-model="formLabelAlign.goods_name"></el-input>
            </el-form-item>
            <el-form-item prop="goods_price" label="商品价格">
              <el-input v-model="formLabelAlign.goods_price"></el-input>
            </el-form-item>
            <el-form-item prop="goods_weight" label="商品重量">
              <el-input v-model="formLabelAlign.goods_weight"></el-input>
            </el-form-item>
            <el-form-item prop="goods_number" label="商品数量">
              <el-input type="number" v-model="formLabelAlign.goods_number"></el-input>
            </el-form-item>
            <el-form-item prop="goods_cat" label="商品分类">
              <el-cascader
                v-model="formLabelAlign.goods_cat"
                :options="cateCasList"
                :props="props"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="1">
          <el-tag
            style="margin:5px;"
            v-for="(item, index) in manyList"
            :key="index"
          >{{item.attr_name}}</el-tag>
        </el-tab-pane>
        <el-tab-pane label="商品属性" name="2">
          <el-form
            :label-position="labelPosition"
            label-width="80px"
            :model="formLabelAlign"
            :rules="rules"
          >
            <el-form-item v-for="(item, index) in onlyList" :key="index" :label="item.attr_name">
              <el-input v-model="formLabelAlign.goods_name"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品图片" name="3">
          <el-upload
            class="upload-demo"
            action="http://klxin.cn:8888/api/private/v1/upload"
            :headers="headersObj"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :on-success="fileSuccess"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-tab-pane>
        <el-tab-pane label="商品内容" name="4">
          <quillEditor v-model="formLabelAlign.goods_introduce" style="height:350px"></quillEditor>
          <el-button type="primary" @click="addGoods">添加商品</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 图片预览 -->
    <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
      <img :src="previewPath" alt class="previewImg" />
    </el-dialog>
  </div>
</template>
           
<script>
import _ from "lodash";
import { cateList_api, cateParamsList_api, goodsAdd_api } from "@/api";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
export default {
  created() {
    this.getParamsCate();
  },
  data() {
    return {
      // table栏左侧显示
      tabPosition: "left",
      activeName: "0",
      /* 基本信息 */
      labelPosition: "top",

      /* 表单数据 */
      formLabelAlign: {
        goods_name: "1",
        goods_cat: [],
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_introduce: "",
        pics: [],
        attrs: [],
      },
      //  级联选择器的数组
      cateCasList: [],
      props: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      //第二个页面
      manyList: [],
      onlyList: [],
      /* 表单校验规则 */
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
        ],
        goods_cat: [
          { required: true, message: "请输入商品分类", trigger: "blur" },
        ],
      },
      //上传图片数据
      fileList: [],
      /* 定义请求头 */
      headersObj: {
        Authorization: window.sessionStorage.getItem("token"),
      },
      previewVisible: false,
      previewPath: "",
    };
  },
  methods: {
    // 级联选择器的change事件
    handleChange() {},
    //   级联选择器的分类
    async getParamsCate() {
      //获取父级分类
      const { data: res } = await cateList_api({ type: 3 });
      // console.log(res, 5555)
      this.cateCasList = res.data;
    },
    //table切换事件
    tabEvent(index) {
      // console.log(index);
      //  判断标签页的跳转
      if (index !== 0) {
        // console.log(this.formLabelAlign);
        if (this.formLabelAlign.goods_cat.length !== 3) {
          this.$message.error("错了哦，请选择分类数据");
          return false;
        }
        //  判断是不是商品参数
        if (index == 1) {
          cateParamsList_api({
            id: this.catId,
            sel: "many",
          }).then((res) => {
            // console.log(res.data,111);
            this.manyList = res.data.data;
          });
        }
        //  静态属性
        if (index == 2) {
          cateParamsList_api({ id: this.catId, sel: "only" }).then((res) => {
            // console.log(res.data,111);
            this.manyList = res.data.data;
          });
        }
      }
    },
    // 上传图片事件
    // 文件上传成功后的钩子
    fileSuccess(response) {
      // console.log(response);
      this.formLabelAlign.pics.push({ pic: response.data.tmp_path }); //  [1,2]
      console.log(this.formLabelAlign, 1111);
    },
    //图片移除
    handleRemove(file) {
      this.formLabelAlign.pics = this.formLabelAlign.pics.filter(
        (item) => item.pic !== file.response.data.tmp_path
      );
      // console.log(this.formLabelAlign,7777);
    },
    //图片预览
    handlePreview(file) {
      // console.log(file);
      // console.log(file.response.data.tmp_path, 44444);
      this.previewVisible = true;
      this.previewPath = "http://klxin.cn:8888/" + file.response.data.tmp_path;
      // console.log(this.previewPath,777);
    },
    //确认添加
    addGoods() {
      // 将原始数据 深拷贝
      var formD = _.cloneDeep(this.formLabelAlign);
      //console.log(formD,22);
      formD.goods_cat = formD.goods_cat.join(",");
      console.log(formD, 22);
      this.$refs.formLabelAlignForm.validate(async (valide) => {
        // console.log(valide, 88899);
        if (valide) {
          //  发送请求
          const { data: res } = await goodsAdd_api(formD);
          // console.log(res, 666666);
          if (res.meta.status === 201) {
            this.$message({
              showClose: true,
              message: res.meta.msg,
              type: "success",
            });
          } else {
            return this.$message.error(res.meta.msg)
          }
        } else {
          return;
        }
      });
    },
  },
  computed: {
    catId() {
      if (this.formLabelAlign.goods_cat.length == 3) {
        return this.formLabelAlign.goods_cat[2];
      } else {
        return 2050;
      }
    },
  },
  components: {
    quillEditor,
  },
};
</script>
<style scoped lang='less'>
.add-container {
  .box-card {
    margin-top: 10px;
    .el-steps {
      margin: 15px 0;
    }
    //  deep 穿透  穿刺
    /deep/.ql-container {
      height: 250px;
    }
  }
}
</style>